<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Grid With Paging Additional Button</title>
    <!-- grid.simple.min.css, grid.simple.min.js -->
    <link rel="stylesheet" href="../../builds/merged/bsgrid.all.min.css"/>
    <script type="text/javascript" src="../../plugins/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../builds/js/lang/grid.zh-CN.min.js"></script>
    <script type="text/javascript" src="../../builds/merged/bsgrid.all.min.js"></script>
</head>
<body style="background-color: #fff;">
<table id="searchTable">
    <tr>
        <th w_index="XH" width="5%;">XH</th>
        <th w_index="ID" width="5%;">ID</th>
        <th w_index="CHAR" w_align="left" width="15%;">CHAR</th>
        <th w_index="TEXT" w_align="left" width="30%;">TEXT</th>
        <th w_index="DATE" width="15%;">DATE</th>
        <th w_index="TIME" width="15%;">TIME</th>
        <th w_index="NUM" width="5%;">NUM</th>
        <th w_render="operate" width="10%;">Operate</th>
    </tr>
</table>
<script type="text/javascript">
    /*
     * getStyleObject Plugin for jQuery JavaScript Library.
     *
     * From: http://upshots.org/javascript/jquery-get-currentstylecomputedstyle
     */
    (function ($) {
        $.fn.getStyleObject = function () {
            var dom = this.get(0);
            var style;
            var returns = {};
            if (window.getComputedStyle) {
                var camelize = function (a, b) {
                    return b.toUpperCase();
                };
                style = window.getComputedStyle(dom, null);
                for (var i = 0, l = style.length; i < l; i++) {
                    var prop = style[i];
                    var camel = prop.replace(/\-([a-z])/, camelize);
                    var val = style.getPropertyValue(prop);
                    returns[camel] = val;
                }
                return returns;
            }
            if (style = dom.currentStyle) {
                for (var prop in style) {
                    returns[prop] = style[prop];
                }
                return returns;
            }
            if (style = dom.style) {
                for (var prop in style) {
                    if (typeof style[prop] != 'function') {
                        returns[prop] = style[prop];
                    }
                }
                return returns;
            }
            return returns;
        }
    })(jQuery);


    var gridObj;
    $(function () {
        gridObj = $.fn.bsgrid.init('searchTable', {
            url: 'data/json.jsp',
            pageSizeSelect: true,
            pageSize: 10
        });

        var buttonHtml = '<td style="text-align: left;">';
        buttonHtml += '<table><tr>';
        buttonHtml += '<td><input type="button" value="button1" onclick="alert(\'button1\');" /></td>';
        buttonHtml += '<td><input type="button" value="button2" onclick="alert(\'button2\');" /></td>';
        buttonHtml += '</tr></table>';
        buttonHtml += '</td>';
        $('#' + gridObj.options.pagingOutTabId + ' tr:eq(0)').prepend(buttonHtml);
        $('#' + gridObj.options.pagingOutTabId + ' tr td:eq(0) :button').css($('.bsgridPaging .pagingBtn:last').getStyleObject()).css('width', 'auto');
    });

    function operate(record, rowIndex, colIndex, options) {
        return '<a href="#" onclick="alert(\'ID=' + gridObj.getRecordIndexValue(record, 'ID') + '\');">Operate</a>';
    }
</script>
</body>
</html>